<template>
	<specify-card
		:pageTitle="'注册'"
		:cardImg="'mayusi.png'"
		@regist="userRegist"
	></specify-card>
	<Transition name="codeImg">
		<imgVerifyCode @verify="verification" v-if="verifyShow"></imgVerifyCode>
	</Transition>
</template>

<script setup>
import axios from 'axios';
import { user } from '../store/user.js';
import { useRouter } from 'vue-router';
const userStore = user();
const router = useRouter();

let verifyShow = ref(false);
let verifyState = ref(true);
let verifyCount = ref(0);
const verification = async (code) => {
	const token = sessionStorage.getItem('code');
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/verifyCode',
			method: 'post',
			data: {
				token,
				code,
			},
		});
		if (res.data.state === 'ok') {
			verifyState.value = true;
			verifyCount.value = 0;
			verifyShow.value = false;
			return ElNotification({
				title: 'Success',
				message: '验证成功',
				type: 'success',
			});
		} else {
			return ElNotification({
				title: 'Warning',
				message: '验证码错误，请重新输入一次TnT',
				type: 'warning',
			});
		}
	} catch (error) {
		console.log(error);
		return ElNotification({
			title: 'Error',
			message: '服务器错误',
			type: 'error',
		});
	}
};

const userRegist = async (username, password, confirmPwd) => {
	if (!(username && password)) {
		return ElNotification({
			title: 'Warning',
			message: '帐户名或密码未填写',
			type: 'warning',
		});
	} else if (!confirmPwd) {
		return ElNotification({
			title: 'Warning',
			message: '请确认自己的密码哦',
			type: 'warning',
		});
	}
	if (username.length < 6 || username.length > 12) {
		verifyCount.value += 1;
		return ElNotification({
			title: 'Warning',
			message: '用户名长度需要大于6个字符且小于12个字符',
			type: 'warning',
		});
	} else if (
		password.length < 8 ||
		username.length > 18 ||
		!/[A-Za-z]/.test(password)
	) {
		verifyCount.value += 1;
		return ElNotification({
			title: 'Warning',
			message:
				'密码长度需要大于8个字符且小于18个字符且必须含有一个英文字母',
			type: 'warning',
		});
	} else if (confirmPwd !== password) {
		verifyCount.value += 1;
		return ElNotification({
			title: 'Warning',
			message: '两次输入的密码不一致',
			type: 'warning',
		});
	} else {
		try {
			let exist = await userStore.judgeExist(username);
			if (exist === 'error') {
				return ElNotification({
					title: 'Errro',
					message: '服务器错误',
					type: 'error',
				});
			} else if (exist === 'exist') {
				verifyCount.value += 1;
				return ElNotification({
					title: 'Warning',
					message: '此用户名已存在',
					type: 'warning',
				});
			} else {
				if (verifyCount.value >= 3) {
					verifyState.value = false;
					verifyShow.value = true;
					return;
				}
				if (!verifyState.value) {
					return;
				}
				const res = await axios({
					baseURL: 'http://localhost:5000',
					url: '/registUser',
					method: 'post',
					data: {
						username,
						password,
					},
				});
				if (res.data.state === 'ok') {
					ElNotification({
						title: 'Success',
						message: '注册成功',
						type: 'success',
					});
					return router.push('/');
				} else {
					return ElNotification({
						title: 'Error',
						message: '服务器错误',
						type: 'error',
					});
				}
			}
		} catch (error) {
			console.log(error);
			return ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		}
	}
};
</script>

<style scoped>
.codeImg-enter-active,
.codeImg-leave-active {
	transition: opacity 1s ease;
}
.codeImg-enter-from,
.codeImg-leave-to {
	opacity: 0;
}
</style>
